<template>
  <div class="cadre-view-coursewrae" :class="{ 'p-full': isFull }">
    <template v-if="type == 'WJLX_PDF'">
      <div class="pdf" :class="{ 'p-full': isFull }">
        <pdf v-for="item in numPages" :key="item" :src="fileId" :page="item" />
      </div>
    </template>
    <template v-else>
      <div class="pdf" :class="{ 'p-full': isFull }">
        <iframe :src="src" width="100%" height="100%" frameborder="0" scrolling="yes" />
      </div>
    </template>
  </div>
</template>
<script>
function encode(url) {
  // 对字符串进行base64编码
  return window.btoa(unescape(encodeURIComponent(url)))
}
import videojs from 'video.js'
import Hls from 'hls.js'
import 'videojs-contrib-hls'
import pdf from 'vue-pdf'
export default {
  name: 'CadreViewCourseWare',
  components: { pdf },
  props: {
    type: {
      type: String,
      default: 'KCLX01'
    },
    fileId: {
      type: String,
      default: ''
    },
    showType: {
      type: String,
      default: 'before' // before 转码前,after 转码后
    },
    isFull: {
      type: Boolean,
      default: false // 是否全屏，默认false
    }
  },
  data() {
    return {
      numPages: '',
      view: '/API-DOCUMENT/document/file/download',
      src: '',
      player: null
    }
  },
  watch: {},
  mounted() {
    setTimeout(() => {
      if ((this.type === 'KCLX01' || this.type === 'KCLX03') && this.showType != 'before') {
        this.getVideo()
      }
      // else if(this.type==='KCLX03' && this.showType!='before'){
      //   this.setAudio();
      // }
    })
  },
  destroyed() {
    if (this.player !== null) {
      this.player.dispose()
    }
  },
  created() {
    let url = this.showType === 'before' ? 'http://192.168.105.47:9526' + this.view + this.fileId : this.fileId
    if (this.type === 'WJLX_PDF') {
      url = this.showType === 'before' ? this.view + '?id=' + this.fileId : this.fileId
    } else {
      url = this.showType === 'before' ? 'http://192.168.105.47:9526' + this.view + '?fullfilename=' + this.fileId : this.fileId
    }
    if (this.type === 'WJLX_PDF') {
      this.src = pdf.createLoadingTask(url)
      this.loadPdfHandler()
    } else {
      // 公用预览方法,传入文件url
      this.src = this.$conversionPreviewLink(url)
    }
  },
  methods: {
    setAudio() {
      if (Hls.isSupported()) {
        var hls = new Hls() // 实例化 Hls 对象
        hls.loadSource(this.fileId) // 传入路径
        hls.attachMedia(this.$refs['my-audio'])
        hls.on(Hls.Events.MANIFEST_PARSED, () => {
          // 加载成功
          setTimeout(() => {
            this.$refs['my-audio'].play() // 调用播放 API
          }, 0)
        })
      }
    },
    getVideo() {
      this.player = videojs(
        'my-video',
        {
          bigPlayButton: false,
          textTrackDisplay: false,
          posterImage: true,
          errorDisplay: false,
          controlBar: true
        },
        function() {
          this.play()
        }
      )
    },
    loadPdfHandler() {
      const loading = this.$loading({
        lock: true,
        text: '加载中，请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.src.promise.then((pdf) => {
        loading.close()
        this.numPages = pdf.numPages
      })
    }
  }
}
</script>
<style lang="scss" rel="stylesheet/scss">
$mainColor: #18a5fd;
.cadre-view-coursewrae {
  height: 400px;
  &.p-full {
    height: 100%;
  }
  .video-full {
    height: 88vh;
  }
  .video {
    width: 100%;
    height: 400px;
    &.p-full {
      height: 88vh;
    }
    background-color: black;
  }
  .audio {
    width: 100%;
    margin-top: 100px;
    outline: none;
  }
  .pdf {
    width: 100%;
    height: 400px;
    &.p-full {
      height: calc(100vh - 130px);
      overflow-y: auto;
    }
    overflow-y: auto;
  }
  .qita {
    width: 100%;
  }
}
</style>
